<template>
  <div class="listview">
    <header>
      <h1 class="title">vue-list</h1>
      <p>A solution to build an infinite load more list component.</p>
      <p>
        <a class="button" href="https://github.com/hejianxian/vue-list"
          >Code on Github</a
        >
        / <a class="button" href="https://github.com/hejianxian">My profile</a>
      </p>
    </header>
    <div class="content">
      <div class="preview">
        <div class="preview-content">
          <vue-list :list.sync="list" :dispatchData="dispatchData"></vue-list>
        </div>
      </div>
      <div class="setting">
        <h3>Scroll info</h3>
        <p>
          Total items: <span>{{ list.length }}</span>
        </p>
        <p>
          Item height: <span>{{ data.height }}px</span>
        </p>
        <p>
          Above items: <span>{{ data._above }}</span>
        </p>
        <p>
          Below items: <span>{{ data._below }}</span>
        </p>
        <p>
          Rows in window:
          <span
            >{{ data.displayCount + 1 }}-{{
              data.displayCount + data._rowsInWindow > list.length
                ? list.length
                : data.displayCount + data._rowsInWindow
            }}</span
          >
        </p>
        <p>
          <span>{{ data._rowsInWindow * 4 }}</span> items from
          <span>{{ data.from + 1 }}</span> to <span>{{ data.to }}</span>
        </p>
        <p>
          Top height: <span>{{ data.lineTopHeight }}px</span>
        </p>
        <p>
          Bottom Height: <span>{{ data.lineBottomHeight }}px</span>
        </p>
        <p>
          Will load more items: <span>{{ !data.canLoadmore }}</span>
        </p>
        <br />
        <p>
          <span
            >You can open the developer tools and observe the changes in the
            elements.</span
          >
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import vueList from '../components/vue-list'
window.COUNT = 1
export default {
  name: 'listview',
  data() {
    return {
      list: [],
      data: {},
    }
  },
  created() {
    for (var i = 0; i < 200; i++) {
      this.list.push({
        title: 'item ' + COUNT++
      })
    }
  },
  methods: {
    dispatchData(data) {
      this.data = data
    }
  },
  components: {
    vueList
  }
}
</script>

<style lang="less" scoped>
html,
body {
  margin: 0;
  padding: 0;
}
.listview {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  header {
    width: 100%;
    padding: 30px 0;
    margin-bottom: 20px;
    .title {
      font-size: 46px;
      line-height: 20px;
      color: #48b884;
    }
    p {
      color: #7f8c8d;
      .button {
        color: #48b884;
      }
    }
  }
  .content {
    display: flex;
    width: 800px;
    height: 650px;
    margin: 0 auto;
    & > div {
      flex: 1;
      height: 100%;
    }
    .preview {
      background: url('../assets/iphone.png') center center no-repeat;
      background-size: 324px 642px;
      position: relative;
      .preview-content {
        width: 256px;
        height: 464px;
        position: absolute;
        left: 72px;
        top: 91px;
        background: #fff;
        overflow-y: scroll;
      }
    }
    .setting {
      span {
        color: #48b884;
      }
    }
  }
}
</style>
